T1.1_Sass 裝好了,可是 - -watch 不能用?


Posted by Christy on 2021-09-01

好吧,會寫這篇實在是因為昨天試了一整天,今天睡醒看到某篇文章頓悟了,想記錄以下幾個心得,提醒自己下次遇到安裝上的錯誤,有什麼可以從這一次獲得經驗。

前情提要:目前在程式導師計畫的 W13,本週預計學習一些前端工具,其中一個是 Sass,相關介紹可以參考 官網

Sass 是 css 的預處理器,意思就是說,可以使用寫程式語言的方式來寫 style sheet(也就是寫 SCSS 或者是 Sass),然後利用 Sass 這套軟體編譯成 css。

在安裝上,我犯的那些錯誤

以下記錄安裝上的錯誤,及使用的解決方法:

1.錯誤訊息:The operation was rejected by your operating system.

解決方法:在指令前面加上 sudo,sass 官網 的指令是 npm install -g sass,就輸入 sudo npm install -g sass

2.錯誤訊息:npm WARN saveError ENOENT: no such file or directory, open '/Users//package.json''

解決方法:參考 這裡

其實安裝到這裡,我懷疑是 node.js 版本有問題,所以把它刪除重新安裝

接著又修復了 To fix this warning, add a private: true to your package.json file,詳細做法可以參考這個 How to solve the npm WARN package.json: No repository field

3.錯誤訊息:dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

我的環境是 mac,所以也試了 $brew install sass/sass/sass 這個指令。理論上來說,現在 Sass 全面推行 dart-sass,在這個指令下裝完應該就能執行了

可以參考這個 解答

嘗試了 $brew install rbenv/tap/openssl@1.0 以及 $brew reinstall openssl@1.0,裝到這裡其實非常灰心了,在想也許找替代方案來做吧,不見得一定要用 sass

替代方案:使用VSCode外掛自動編譯SASS/SCSS

4.隔天再試一次,終於成功了

主因是早上睡醒看到這篇 Compile SASS/SCSS From The Command Line

把它裡面的 Method 每個後面都加上 --force 再跑一遍,另外官網要求的設置路徑,我把檔案放在「應用程式」裡面,設置是長這樣:export PATH="/Applications/dart-sass/sass:$PATH"

整理一下,正常安裝 Sass 應該會是什麼樣?

a. 在 terminal 用 sass --version 時,應該會有 1.38.2 compiled with dart2js 2.13.4,如果只有 1.38.2,表示電腦裡面有 sass 但是 dart 沒有裝好

b. 官網最新的 dart-sass 下載對應檔案以後執行,並且設置 路徑

tips: 可以用 terminal open /Users/your-user-name/.bash_profile 找到 bash_profile 這個檔案,或用一個 nano 相關的指令可以直接修改並存擋。

安裝步驟其實 Compile SASS/SCSS From The Command Line 說得很詳細,可以照著跑跑看,我就不重複了。

我的學習與反思

a. 坦白說不是很確定到底哪個環節出了問題,但這樣一路更新下來,brew, node, npm 等等全部都被更新成最新版本了。

b. 假設真的無法使用,應該也有很多替代方案可以選擇,不要執著「一定要用這個工具」,有時轉個彎也很不錯。

c. 冷靜的把每一行 terminal 報的錯都看一遍,直接搜尋錯誤訊息。

d. 像這次的關鍵字,比較適合的是 'sass dart - - watch not working', 'remove ruby sass, install dart sass',可以找到一些相關資料。

e. 在安裝的時候不小心裝了 ruby 版本,只好刪掉重來,下次執行指令之前,要看仔細有可能會出現什麼結果?

以上就是這次的學習,環境問題真的有點煩人,期許自己下次遇到時能夠更好的解決。










Related Posts

 Day 171

Day 171

加密貨幣交易所

加密貨幣交易所

什麼是 API? SOAP? 其他 HTTP API?

什麼是 API? SOAP? 其他 HTTP API?


Comments